<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .el-input.is-disabled .el-input__inner,
        .el-tag.el-tag--info {
            color: #606266;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{ action=='Modify' ? '修改交易申请' : '提交交易申请' }}</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form"
                    :data-options="JSON.stringify({'tableName':'supply_order','formName':'dataForm' ,'primaryKey':'Supply_Order_SerialNumber'})">
                </div>
                <div class="table_titel">
                    <div class="titel">供应商品基本信息</div>
                </div>
                <el-form :model="supply_unitprice" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="3" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">供应商品</div>
                            </template>
                            <el-form-item prop="Article_SerialNumber"
                                :rules="[{ required: true, message: '请选择供应商品', trigger: 'change' }]">
                                <el-select disabled v-model.trim="supply_unitprice.Article_SerialNumber"
                                    placeholder="请选择供应商品" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_info" :key="index"
                                        :label="item.Article_Name" :value="item.Article_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">供应总量</div>
                            </template>
                            <el-form-item prop="Total_Quantity"
                                :rules="[{ required: true, message: '请输入供应总量', trigger: 'blur' }]">
                                <el-input disabled type="number" v-model.trim="supply_unitprice.Total_Quantity"
                                    placeholder="请输入供应总量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">起步购买量</div>
                            </template>
                            <el-form-item prop="Start_Quantity" :rules="[{ required: true, message: '请输入起步购买量', trigger: 'blur' }]">
                                <el-input-number disabled :min="0" :max="Number(supply_unitprice.Total_Quantity)" v-model.trim="supply_unitprice.Start_Quantity" placeholder="请输入起步购买量"></el-input-number>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">步长</div>
                            </template>
                            <el-form-item prop="Unit_Quantity" :rules="[{ required: true, message: '请输入步长', trigger: 'blur' }]">
                                <el-input-number disabled :min="0" :max="Number(supply_unitprice.Total_Quantity)" v-model.trim="supply_unitprice.Unit_Quantity" placeholder="请输入步长"></el-input-number>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">已售量</div>
                            </template>
                            <el-form-item prop="Sales_Quantity"
                                :rules="[{ required: true, message: '请输入已售量', trigger: 'blur' }]">
                                <el-input disabled type="number" v-model.trim="supply_unitprice.Sales_Quantity"
                                    placeholder="请输入已售量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">剩余量</div>
                            </template>
                            <el-form-item prop="Remain_Quantity"
                                :rules="[{ required: true, message: '请输入剩余量', trigger: 'blur' }]">
                                <el-input disabled type="number" v-model.trim="supply_unitprice.Remain_Quantity"
                                    placeholder="请输入剩余量"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">单价（元）</div>
                            </template>
                            <el-form-item prop="Unit_Price"
                                :rules="[{ required: true, message: '请输入单价', trigger: 'blur' }]">
                                <el-input disabled type="number" v-model.trim="supply_unitprice.Unit_Price"
                                    placeholder="请输入单价"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">单位</div>
                            </template>
                            <el-form-item prop="Article_Unit_SerialNumber"
                                :rules="[{ required: true, message: '请选择单位', trigger: 'change' }]">
                                <el-select disabled v-model.trim="supply_unitprice.Article_Unit_SerialNumber"
                                    placeholder="请选择单位" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_unit" :key="index" :label="item.Unit"
                                        :value="item.Article_Unit_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">联系人</div>
                            </template>
                            <el-form-item prop="Contacts"
                                :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
                                <el-input disabled v-model.trim="supply_unitprice.Contacts"
                                    placeholder="请输入联系人"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">联系电话</div>
                            </template>
                            <el-form-item prop="Contacts_Phone"
                                :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
                                <el-input disabled v-model.trim="supply_unitprice.Contacts_Phone"
                                    placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">所属企业</div>
                            </template>
                            <el-form-item prop="Enterprise_Info_SerialNumber"
                                :rules="[{ required: true, message: '请选择所属企业', trigger: 'change' }]">
                                <el-select disabled v-model.trim="supply_unitprice.Enterprise_Info_SerialNumber"
                                    placeholder="请选择所属企业" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in enterprise_info" :key="index"
                                        :label="item.Enterprise_Name" :value="item.Enterprise_Info_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item :span="2">
                            <template slot="label">
                                <div class="cell-item">发货地址</div>
                            </template>
                            <el-form-item prop="CountyNumber"
                                :rules="[{ required: true, message: '请选择发货地址', trigger: 'change' }]">
                                <el-cascader disabled @change="changeCity" v-model.trim="supply_unitprice.CountyNumber"
                                    filterable :props="{label:'name',value:'code',emitPath:false}" :options="city"
                                    clearable placeholder="请选择地址" style="width: 100%;"></el-cascader>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">详细地址</div>
                            </template>
                            <el-form-item prop="Detailed_Address"
                                :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
                                <el-input disabled v-model.trim="supply_unitprice.Detailed_Address"
                                    placeholder="请输入详细地址" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item :span="3">
                            <template slot="label">
                                <div class="cell-item">补充条款</div>
                            </template>
                            <el-form-item prop="Supplementary_Provisions">
                                <el-input disabled type="textarea" :autosize="{ minRows: 4}"
                                    v-model.trim="dataForm.Supplementary_Provisions" placeholder="可输入补充条款"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">补充说明</div>
                            </template>
                            <el-form-item prop="Supplementary_Explanation">
                                <el-input disabled type="textarea" :autosize="{ minRows: 4}"
                                    v-model.trim="dataForm.Supplementary_Explanation" placeholder="可输入补充说明"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">申请基本信息</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="1" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">企业全称</div>
                            </template>
                            <el-form-item prop="Enterprise_Info_SerialNumber">
                                <el-input
                                    disabled
                                    :value="(enterprise_info.find(i => i.Enterprise_Info_SerialNumber == dataForm.Enterprise_Info_SerialNumber) || {}).Enterprise_Name">
                                </el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">联系人</div>
                            </template>
                            <el-form-item prop="Contacts"
                                :rules="[{ required: true, message: '请输入联系人', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Contacts" placeholder="请输入联系人"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">联系电话</div>
                            </template>
                            <el-form-item prop="Contacts_Phone"
                                :rules="[{ required: true, message: '请输入联系电话', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Contacts_Phone" placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">收货地址</div>
                            </template>
                            <el-form-item prop="CountyNumber"
                                :rules="[{ required: true, message: '请选择收货地址', trigger: 'change' }]">
                                <el-cascader @change="changeCity" v-model.trim="dataForm.CountyNumber" filterable
                                    :props="{label:'name',value:'code',emitPath:false}" :options="city" clearable
                                    placeholder="请选择地址" style="width: 100%;"></el-cascader>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">详细地址</div>
                            </template>
                            <el-form-item prop="Detailed_Address"
                                :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
                                <el-input v-model.trim="dataForm.Detailed_Address" placeholder="请输入详细地址" />
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>

                    <div class="table_titel">
                        <div class="titel">交易详情</div>
                    </div>
                    <el-descriptions :column="1" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">交易数量</div>
                            </template>
                            <el-form-item prop="Quantity"
                                :rules="[{ required: true, message: '请输入交易数量', trigger: 'blur' }]">
                                <el-input-number @change="changeQuantity" @input="changeQuantity"
                                    :min="minQty" :max="maxQty" :step="stepQty" step-strictly type="number"
                                    v-model.trim="dataForm.Quantity" placeholder="请输入交易数量"></el-input-number>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">总金额</div>
                            </template>
                            <el-form-item prop="Amount"
                                :rules="[{ required: true, message: '请输入总金额', trigger: 'blur' }]">
                                <el-input disabled type="number" v-model.trim="dataForm.Amount"
                                    placeholder="请输入总金额"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">付款类型</div>
                            </template>
                            <el-form-item prop="Trading_SerialNumber"
                                :rules="[{ required: true, message: '请选择付款类型', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Trading_SerialNumber" placeholder="请选择付款类型"
                                    style="width: 100%;" clearable filterable>
                                    <el-option
                                        v-for="(item,index) in trading.filter(i => Trading_SerialNumber.some(x => x == i.Trading_SerialNumber))"
                                        :key="index" :label="item.Trading_Name" :value="item.Trading_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">支付方式</div>
                            </template>
                            <el-form-item prop="Payment_Method_SerialNumber"
                                :rules="[{ required: true, message: '请选择付款类型', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Payment_Method_SerialNumber" placeholder="请选择付款类型"
                                    style="width: 100%;" clearable filterable>
                                    <el-option
                                        v-for="(item,index) in payment_method.filter(i => Payment_Method_SerialNumber.some(x => x == i.Payment_Method_SerialNumber))"
                                        :key="index" :label="item.Payment_Method"
                                        :value="item.Payment_Method_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>

                    <div class="table_titel">
                        <div class="titel">运输选择</div>
                    </div>
                    <el-descriptions :column="1" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">装运方式</div>
                            </template>
                            <el-form-item prop="Shipment_Method_SerialNumber"
                                :rules="[{ required: true, message: '请选择装运方式', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Shipment_Method_SerialNumber" placeholder="请选择装运方式"
                                    style="width: 100%;" clearable filterable>
                                    <el-option
                                        v-for="(item,index) in shipment_method.filter(i => Shipment_Method_SerialNumber.some(x => x == i.Shipment_Method_SerialNumber))"
                                        :key="index" :label="item.Shipment_Method"
                                        :value="item.Shipment_Method_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">运输方式</div>
                            </template>
                            <el-form-item prop="Transport_Method_SerialNumber"
                                :rules="[{ required: true, message: '请选择运输方式', trigger: 'change' }]">
                                <el-select v-model.trim="dataForm.Transport_Method_SerialNumber" placeholder="请选择运输方式"
                                    style="width: 100%;" clearable filterable>
                                    <el-option
                                        v-for="(item,index) in transport_method.filter(i => Transport_Method_SerialNumber.some(x => x == i.Transport_Method_SerialNumber))"
                                        :key="index" :label="item.Transport_Method"
                                        :value="item.Transport_Method_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button v-if="action=='Add'" size="medium" type="primary" plain @click="handleSubmit"
                    :loading="loading">提交</el-button>
                <el-button v-if="action=='Modify'" size="medium" type="primary" plain @click="handleResubmit"
                    :loading="loading">修改并重新提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>
